<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>


    <!-- 在 Vue.js 中，当你直接修改数组或对象的某个属性（比如通过索引直接赋值修改数组元素），Vue 
    可能无法检测到这种变化，从而不会触发视图更新。这是因为 Vue 在初始化时，通过 getter 和 setter 函数对响应式数据进行了依赖追踪，
    而直接通过索引修改数组元素或对象的属性，绕过了 Vue 的依赖追踪机制。 -->

    <!-- 列表渲染 -->
<!-- 修改下标的话要用set( , , ) 修改什么 ,修改下标，修改内容 -->
<!-- for循环也可以渲染对象 -->
<!-- $forceUpdate 可以用来强制渲染 -->
<!-- $set的使用 -->
<!-- push 数组后面新增一个元素，pop删除最后一个元素，删除第一个shift,新增第一个unshift,splice替换某一个元素，sort数组排序， -->
<!-- reverse 反转一个数组 -->

<!-- 在 Vue.js 中，当你直接给一个对象添加新的属性时，这个新属性默认不是响应式的。Vue.js 在实例创建时，会遍历 data 选项中的属性，
并使用 Object.defineProperty（在 Vue 2.x 中）或 Proxy（在 Vue 3.x 中，对于组合式 API 的 reactive 对象）来确保这些属性是响应式的。 -->

<!-- 对象类型 添加使用 this.$set(), Vue.set()  删除使用 this.$delete Vue.delete() -->
<div id="ulapp">
    <ul >
        <li v-for="(item,index) in items"> {{item.message}} -- {{index}}</li>
    </ul>

        <li v-for="(val,key) in obj">{{val}}--{{key}}</li>
    </ul>
    <button @click="addLi">添加</button>
    <button @click='updateLast'>修改最后一个</button>
</div>

<script>
    var app = new Vue({
        el: "#ulapp",
        data: {
            items: [
                {message: 'first'},
                {message: 'second'}
            ],
            obj:{
                name:'李彤康',
                age:'22',
                sex: '男'
            }
        },
        methods: {
            addLi: function() {
                this.items.push({message: 'third'});
            },
            updateLast: function(){
             
                //this.$set(this.items,this.items.length-1,{message: '渲染完成确保是响应式的'})
             this.items[this.items.length-1]={message:'强制渲染'}
             this.$forceUpdate();
             
            }
        }
    });

    // 直接添加属性，不是响应式的  
// vm.userProfile.age = 30;  
  
  // 使用 Vue.set 添加属性，是响应式的  
//   Vue.set(vm.userProfile, 'email', 'john.doe@example.com');
  
</script>
</body>
</html>